<script setup lang="ts">
import Cookies from 'js-Cookie'
import { ref, onMounted, watch, reactive, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import img from '../../../static/img/logo.jpg'
import { ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

import flag from '../../hooks/changePhoneFlag'

const phoneflag = flag(1200)
const url = getCurrentInstance()?.appContext.config.globalProperties.$url
const router = useRouter()
const route = useRoute()

watch(route, (newvalue) => {
    switch (newvalue.name) {
        case 'index':
            selectData.value = 0
            break
        case 'blog':
            selectData.value = 1
            break
        case 'messageWall':
            selectData.value = 2
            break
    }
})



onMounted(() => {
    if (data[selectData.value].path !== route.name)
        switch (route.name) {
            case 'index':
                selectData.value = 0
                break
            case 'blog':
                selectData.value = 1
                break
            case 'messageWall':
                selectData.value = 2
                break

        }
})
interface T {
    name: string,
    path: string
}
const selectData = ref<number>(0)
const data = <T[]>[
    { name: '首页', path: "index" },
    { name: '平台服务', path: "blog" },
    { name: '新闻资询', path: "blog" },
    { name: '社会服务', path: "blog" },
    { name: '关于我们', path: "messageWall" }
]
const change = (item: T, index: number) => {
    if (item.name === data[selectData.value].name) return
    else {
        selectData.value = index
        router.push({ name: item.path })
    }
}

const darkFlag = ref<boolean>(false)  //判断是否为黑夜模式
const user = reactive({
    user_name: '',
    loginFlag: false,
    avatar: ''
})
onMounted(() => {
    if (Cookies.get("LoginState") === 'true') {
        user.user_name = Cookies.get('username') as string
        user.loginFlag = true
    }
})
const linkTo = (name: string) => {
    router.push({ name })
}


const msglist = [
    { name: '个人中心', index: 0 },
    { name: '退出登录', index: 1 },
]
const change2 = (val: number) => {
    switch (val) {
        case 1:
            Cookies.remove('city_id')
            Cookies.remove('district_id')
            Cookies.remove('user_id')
            Cookies.remove('username')
            Cookies.remove('gender')
            Cookies.remove('city')
            Cookies.remove('district')
            Cookies.remove('user_type')
            Cookies.remove('super_admin')
            Cookies.remove('high_admin')
            Cookies.remove('mid_admin')
            Cookies.remove('phone')
            Cookies.remove('AccessToken')
            Cookies.remove('RefreshToken')
            Cookies.remove('LoginState')
            user.loginFlag = false
            ElMessage.success("已注销")
            localStorage.removeItem("questionnaireData")
            router.go(0)
            break
        case 0: router.push({ name: "user" })
            break;
    }
}
</script>

<template>
    <div class="wrap">

        <div class="header-left" v-if="!phoneflag">
            <img :src="img" alt="" class="img">
            <div>广大青心·学生心理智慧服务平台</div>
        </div>
        <div class="header-left" v-else>
            <img :src="img" alt="" class="img">
            <el-dropdown>
                <span class="el-dropdown-link">
                    {{ data[selectData].name }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="(item, index) in data" :key="item.name" @click="change(item, index)">
                            {{ item.name }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div v-if="!phoneflag" class="header-middle">
            <div v-for="(item, index) in data" :key="item.name" :class="{ active: item.path === data[selectData].path }">{{
                item.name }}</div>
            <!-- <el-switch v-model="darkFlag" class="ml-2" inline-prompt /> -->
            <div v-if='!user.loginFlag' @click="router.push({ name: 'login' })">个人中心</div>
            <div v-else class="msg">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        {{ user.user_name }}
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="item in msglist" :key="item.index" @click="change2(item.index)">
                                {{ item.name }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>

        </div>

        <div v-else></div>
        <!-- <div class="mgr5" v-if="!user.loginFlag">
            <el-button type="success" round @click="linkTo('login')">
                登录
            </el-button>
        </div>
        <div v-if="!user.loginFlag">
            <el-button type="danger" round @click="linkTo('reg')">
                注册
            </el-button>
        </div> -->

    </div>
</template>

<style lang="scss" scoped>
.wrap {
    display: flex;
    background-color: #fff;
    height: 8vh;
    z-index: 100;
    color: #000;
    position: fixed;
    width: 100%;
    justify-content: space-between;



    >.header-left {
        font-size: 20px;
        margin-left: 50px;

        >.img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }

        .el-dropdown-link {
            cursor: pointer;
            font-size: 18px;

            display: flex;
            align-items: center;
        }
    }

    >.mgr5 {
        margin-right: 15px;
    }

    >.header-middle {
        margin-right: 100px;
        // width: 80%;
        font-size: 18px;

        >div {
            margin: 0 30px;
            cursor: pointer;
        }

        >.msg {


            .el-dropdown-link {
                height: 21px;
                // width: 100px;
                color: #000;
                justify-content: center;
                cursor: pointer;
                font-size: 18px;
                display: flex;
                align-items: center;
            }
        }

        >.active {
            color: $active-color;
        }
    }

    >div {
        // background-color: $bg-color;
        display: flex;
        justify-content: center;
        align-items: center;
    }


}
</style>